<template>
    <div>
       <div style="border:1px solid black;height:400px;">
        <el-container>
        <el-header>
            <span class="left">页面流量</span>
            <div style="float:right;">
            <a class="el-button" size="mini" id ='dc'>导出数据</a>
            <el-button-group class="header_right">
                <el-button size="mini" class="header_right"  autofocus="autofocus">最近7天</el-button>
                <!-- <el-button size="mini" class="header_right">最近30天</el-button> -->
            </el-button-group>
            <!-- <el-date-picker
                class="header_right"
                v-model="dateRange"
                size="mini"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="fetchData()"
                value-format="yyyy-MM-dd"
            ></el-date-picker> -->
            </div>
        </el-header>
        <el-main>
            <div id="flow" style="width: 1000px;height:300px;"></div>
        </el-main>
    </el-container>
       </div>
       <div  style="border:1px solid black;height:500px;margin-top:25px;">
      <el-container>
      <el-header>
        <span class="left">端口占比</span>
        <div style="float:right;">
          <a class="el-button" size="mini" id ='dc2'>导出数据</a>
          <el-button-group class="header_right">
            <el-button size="mini" class="header_right">最近7天</el-button>
            <el-button size="mini" class="header_right">最近30天</el-button>
          </el-button-group>
            <el-date-picker
                class="header_right"
                v-model="dateRange2"
                size="mini"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="fetchData2()"
                value-format="yyyy-MM-dd"
            ></el-date-picker>
        </div>
      </el-header>
    <el-main>
        <div id="dk" style="width: 750px;height:250px;"></div>
        </el-main>
    </el-container>
    </div>
    </div>
</template>

<script>
export default {
    dc () {
      console.log(document.getElementsByTagName("table")[0].outerHTML)
      var html1 =
        "<html><head><meta charset='utf-8' /></head><body>" +
        document.getElementsByTagName("table")[0].outerHTML +
        "</body></html>";
      var blob1 = new Blob([html1], { type: "application/vnd.ms-excel" })
      var a1 = document.getElementById("dc");
      a1.href = URL.createObjectURL(blob1);
      a1.download = "交易数据统计1.xls"
    },
    data() {
        return {
            dateRange: [],
            dateList: [],
            pvList: [],
            uvList: [],
            dateRange2: [],
            search: {},
            dkList: ['PC端', '微信', 'APP', '其他']
        }
    },
    methods: {
    getDate() {
        const arr = []
        for (let i = 0; i < 7; i++) {
        const time = new Date(new Date().setDate((new Date().getDate() + i) - 7));
        const year = time.getFullYear();
        const month = `0${time.getMonth() + 1}`.slice(-2);
        const strDate = `0${time.getDate()}`.slice(-2);
        arr.push(`${year}-${month}-${strDate}`)
      }
      this.dateList = arr
    },
    async fetchData2() {
      var myChart = this.$echarts.init(document.getElementById("dk"))
      var option = {
          title: {
            text: "端口占比",
            x: "center"
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: "vertical",
            left: "right",
            data: this.dkList
          },
          series: [
            {
              name: "金额",
              type: "pie",
              radius: "55%",
              center: ["35%", "60%"],
              data: [{ value: 0, name: 'PC端' }, { value: 0, name: '微信' }, { value: 0, name: 'APP' }, { value: 0, name: '其他' }],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
    };
      myChart.setOption(option)
    },
    async fetchData() {
    //   var list = JSON.stringify(this.dateList)
      console.log(this.search)
      const { data: res } = await this.$http.post(
        `orders/statis/flow`, this.dateList
      )
      console.log(res)
      res.data.forEach(element => {
        this.pvList.push(element[0])
        this.uvList.push(element[1])
      });
      var myChart = this.$echarts.init(document.getElementById("flow"))
      var option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['浏览次数(PV)', '浏览人数(UV)']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: this.dateList,
        axisLabel: {
        rotate: 30, // 旋转角度
        interval: 0
        }
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '浏览次数(PV)',
            type: 'line',
            stack: '总量',
            data: this.pvList
        },
        {
            name: '浏览人数(UV)',
            type: 'line',
            stack: '总量',
            data: this.uvList
        }
    ]
};
      myChart.setOption(option)
        }
    },
    mounted() {
        this.getDate()
        this.fetchData()
        this.fetchData2()
    }
}
</script>

<style scoped>
.el-header {
  background-color: rgba(228, 228, 228, 1);
  color: #333;
  text-align: center;
  line-height: 60px;
}
.left {
  float: left;
}
.header_right {
  margin-left: 15px;
}
</style>
